import { useState } from 'react';
import { Tooltip, Popconfirm, Collapse } from 'antd'
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons'
import { useEventEmitter, useDebounceEffect, useMount } from 'ahooks'

import {
    ChartsFromFieldA04,

    ChartsFromBaseA04,
    ChartsFromProgressA04,
    ChartsFromIndicatorA02,

    ChartsFromAxesA01,
    ChartsFromTitleA01,
    ChartsFromLegendsA01,
    ChartsFromTooltipA01,


} from '../../Utils/ChartsFrom'


import { VChartA04 } from '../../Utils/ChartsRender'
import { FormItemMapping } from '../../Utils/FormTemp'
import { DefaultColor, ChartsDefaultA04 } from '../../Config/chartsConfig'

const FormDataBase = {
    ChartsFromBaseA04,
    ChartsFromProgressA04,
    ChartsFromIndicatorA02,
}

const FormDataBaseA02 = {
    ChartsFromAxesA01,
    ChartsFromTitleA01,
    ChartsFromLegendsA01,
    ChartsFromTooltipA01,
}


const SimulateDataTemplate = ({ item, index, DataEvent, delIcon }) => {
    const click = ({ type, value }) => DataEvent.emit({ type, value, index })
    return (
        <div className='SimulateDataTemplate'>
            <FormItemMapping field={ChartsFromFieldA04} data={item} click={click} />
            {delIcon &&
                <Popconfirm
                    title="删除提醒!"
                    description="是否要删除当前分组?"
                    okText="删除"
                    cancelText="取消"
                    onConfirm={() => DataEvent.emit({ type: 'onDelete', index })}
                >
                    <Tooltip title="删除分组" placement='bottom'>
                        <DeleteOutlined className='SimulateDataTemplate__Delete' />
                    </Tooltip>
                </Popconfirm>
            }
        </div>
    )
}

const GenerateSimulateData = (data) => {
    return [...Array(1)].map((_, key) => data.map(item => ({ name: item.name, type: item.type, value: Math.random() }))).flat()
}

// 折现、面积、柱形、条形
const SetChartsA04 = ({ CallBackEvent, field, style }) => {
    const [ChartsData, setChartsData] = useState()
    const [ChartsStyle, setChartsStyle] = useState()
    const [SimulateData, setSimulateData] = useState(field || [{ name: '测试分组1', type: 'type', value: 'value', color: DefaultColor[0] }])

    CallBackEvent.useSubscription(val => {
        if (val.type === 'getConfig') CallBackEvent.emit({ type: 'setConfig', data: { SimulateData, ChartsStyle } })
    })

    const A01Config = (ChartsStyle) => {
        const FormDataMapping = [
            { key: 1, label: '基础设置', fieldArr: 'ChartsFromBaseA04' },
            { key: 2, label: '条形背景', fieldArr: 'ChartsFromProgressA04' },
            { key: 3, label: '指示卡', fieldArr: 'ChartsFromIndicatorA02' },
        ]
        return FormDataMapping.map(({ key, label, fieldArr }) => ({
            key, label, children: <FormItemMapping field={FormDataBase[fieldArr]} data={ChartsStyle} click={onCallBack} />
        }))
    }

    const BaseConfig = (ChartsStyle) => {
        const FormDataMapping = [
            { key: 1, label: '轴设置', fieldArr: 'ChartsFromAxesA01' },
            { key: 3, label: '标题设置', fieldArr: 'ChartsFromTitleA01' },
            { key: 2, label: '图例设置', fieldArr: 'ChartsFromLegendsA01' },
            { key: 4, label: '提示器', fieldArr: 'ChartsFromTooltipA01' },
        ]
        return FormDataMapping.map(({ key, label, fieldArr }) => ({
            key, label, children: <FormItemMapping field={FormDataBaseA02[fieldArr]} data={ChartsStyle} click={onCallBack} />
        }))
    }

    const DataEvent = useEventEmitter()
    DataEvent.useSubscription(val => {
        const { type, value, index } = val
        if (type === 'onDelete') {
            SimulateData.splice(index, 1)
            setSimulateData([...SimulateData])
        } else {
            SimulateData[index][type] = value
            setSimulateData([...SimulateData])
        }
    })

    const onDataPacket = () => {
        SimulateData.push({ name: `测试分组${SimulateData.length + 1}`, type: 'type', value: 'value', color: DefaultColor[SimulateData.length] })
        setSimulateData([...SimulateData])
    }

    const onCallBack = ({ type, value, group, index }) => {
        if (type === 'onAddGroup') {
            ChartsStyle[value].push(ChartsStyle[value].at(-1))
            setChartsStyle({ ...ChartsStyle })
        } else if (type === 'onDelGroup') {
            const newArr = ChartsStyle[value].with(index, null).filter(item => item !== null)
            ChartsStyle[value] = newArr
            setChartsStyle({ ...ChartsStyle })
        } else {
            if (group) {
                ChartsStyle[group][index][type] = value
                setChartsStyle({ ...ChartsStyle })
            } else setChartsStyle(e => ({ ...e, [type]: value }))
        }
    }

    useDebounceEffect(() => {
        const data = GenerateSimulateData(SimulateData)
        setChartsData(data)
    }, [SimulateData], { wait: 1000 })

    useMount(() => setChartsStyle(style || ChartsDefaultA04))

    return (
        <>
            <div className='Box_left'>
                <div className='Box__Preview'>
                    {ChartsStyle && ChartsData && <VChartA04 data={ChartsData} style={ChartsStyle} />}
                </div>
                <div className='Box__Data'>
                    {SimulateData.map((item, index) =>
                        <SimulateDataTemplate key={index} item={item} index={index} DataEvent={DataEvent} delIcon={SimulateData.length !== 1} />
                    )}

                    <div className='Box__AddData' style={{ height: 258 }} onClick={onDataPacket}>
                        <PlusOutlined />
                        <div>添加分组</div>
                    </div>
                </div>
            </div>
            <div className='Box_right'>
                {ChartsStyle &&
                    <>
                        <Collapse defaultActiveKey={['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']} items={A01Config(ChartsStyle)} />
                        <Collapse defaultActiveKey={['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']} items={BaseConfig(ChartsStyle)} />
                    </>
                }
            </div>
        </>
    );
};

export default SetChartsA04;